/**
 * 
 * @authors cherish yii2 (cherish@cherish.pw)
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 */

//封装函数  动态写入页面
let $title = $("#title");
let $todolist  = $("#todolist");
let $donelist  = $("#donelist");
const $todocount = document.querySelector('#todocount');
const $donecount = document.querySelector('#donecount');

let $hh = $("#hh");
let $hh2 = $("#hh2");

var list={
  $todolist:[],
  $donelist:[]
};

function setPage1(){
  // 根据页面结构创建todo标签; 
  let $todo = $(`
  <li>
        <input type="checkbox" >
        <p>${$title.val()}</p>
        <a href="javascript:void(0)">-</a>
  </li>`);
 
  // 把todo标签放入到todolist之中; 
 
  $todolist.prepend($todo);
  

  $title.val("");
  
  list.$todolist.push($todolist);
  $todocount.innerHTML=list.$todolist.length;
  console.log(list.$todolist.length);
  // window.history.pushState(list, "todo");

  

}  
function event(){

  $title.keydown(function(e){
    var code = e.keyCode || e.which ;
    //判定是不是回车键
    if(code === 13){
      setPage1();
    }
  })
  //前边的复选框
  $todolist.parent().on("change" , "input[type=checkbox]" , toggleLi );
// 给todo添加可以修改的功能; 
$todolist.on("click" , "p" , edit)
//保存功能
$todolist.on("blur" , "input[type=text]" , save)
//删除功能
$todolist.on("click" , "a" , remove2)
// $donelist.parent().on("change" , "input[type=checkbox]" , toggleLi );
$donelist.on("click" , "p" , edit);
$donelist.on("blur" , "input[type=text]" , save);
$donelist.on("click" , "a" , remove1)


// list.$donelist.push($donelist);
// $todocount.innerHTML=list.$todolist.length;
// $donecount.innerHTML=list.$donelist.length;
}
//封装 切换列表 修改、保存、删除功能的函数
function toggleLi(){
  if(this.checked){
    //选中状态下 换到已完成列表
    $donelist.append( $(this).parent() );
    list.$todolist.splice($(this).parent().index,1);
    $todocount.innerHTML=list.$todolist.length;
    list.$donelist.push($(this).parent());
    $donecount.innerHTML=list.$donelist.length;


    
  }else{
    $todolist.append( $(this).parent() );
    list.$todolist.push($(this).parent());
    $todocount.innerHTML=list.$todolist.length;
    console.log(list.$todolist.length);
    list.$donelist.splice($(this).parent().index,1);
    $donecount.innerHTML=list.$donelist.length;
  }
 
}
//更改功能
function edit(){
  if( $(this).children().length > 0 ){
    // 终止代码执行，不去创建新的input标签;
    return false;
}

var html = $(this).text();
// 创建一个input标签，并把p标签里面的内容放入进去; 
$(this).html(`<input type="text" value=${ html }>`);
// 创建元素之后要给元素进行一个焦点获取行为; 

$(this).children().select();
}

 // 保存修改后的内容; 
 function save(){
  // 1. 取出当前的value值; 
  // 2. 给当前元素父级html赋值value; 
  let value = $(this).val();
  $(this).parent().html( value );
}
//删除当前元素
function remove1(){
  $(this).parent().remove();
    list.$donelist.splice($(this).parent().index,1);
    $donecount.innerHTML=list.$donelist.length;


}
function  remove2(){
  $(this).parent().remove();
  list.$todolist.splice($(this).parent().index,1);
  $todocount.innerHTML=list.$todolist.length;
}

event();
